One token layer
Colour, spacing, type and radii all live in one file. Change six values and the whole world changes with them.
DigiLuko · Free HTML template 02
Drawn from the short story The First Mechan
Rem
Built for long reads
Cold steel, one hot accent, no build step. Ten pages, one script and a single token file that re-skins the whole thing.
What you get
One system, bolted together
Every surface on the site is the same plate, every mark is the same ring, and every colour is a variable. That is the whole template.
Dark and light
A light page swaps one stylesheet link. The chrome and the Crucible stay cast iron in both, because they should.
No build step
Vanilla HTML, CSS and one script. No bundler, no package manager, nothing to keep upgraded.
Ten pages
Landing, components, blog, post, portfolio, a shop with product and cart, a quiet legal page and a lean 404 - all cut from the same stylesheets.
Set like a page
Justified, hyphenated reading copy with a proper indent, and framed blocks that opt out on their own.
Accessible by default
Skip link, visible focus rings, reduced-motion support and honest ARIA on everything that toggles.
Geared, not animated
Nothing moves on its own
The cogs beside this text do not spin on a timer. They are geared to the scrollbar through a single custom property, so the page itself is what drives them - and under prefers-reduced-motion they simply stop.
The same discipline runs through the template: state is a class, motion is short, and every animation can be switched off without breaking a layout.
Pressure
12Sigils
10Pages
0Dependencies
2Themes
Under the plate
How it is put together
Six values carry the world
The core palette is six variables plus five accents. Nothing below the tokens file spells a colour, which is why the light theme costs one stylesheet link instead of a second set of rules.
:root {
--bg0: #0d1218; /* midnight steel */
--fg0: #dfe7ee; /* hoarfrost */
--acc-ember: #e08b3a;
--acc-brass: #c9a227;
}Four shared stylesheets, one script
Tokens re-skin, base sets the type, layout builds the skeleton, components hold the reusable parts, and every page adds at most one file of its own. Delete a section and its rules simply go unused.
css/
tokens.css /* the only theme layer */
tokens-light.css /* its mirror */
base.css
layout.css
components.css
landing.css /* index.html only */
blog.css /* blog + blogpost */
portfolio.css
shop.css /* + product, cart */
legal.css
js/
main.jsDepth is made with light
A plate has a lit top edge, a shadowed bottom edge and four rivets. That is the entire surface language - card, callout, field, table and code block are all the same object wearing different content.
.plate {
background:
linear-gradient(180deg, var(--metal-hi), transparent 45%),
var(--bg1);
box-shadow:
var(--shadow-plate),
inset 0 1px 0 var(--metal-hi);
}
Turris Borealis
Live
None of these parts names a colour. They read one variable, and the variable is the only thing the buttons on the right change.
Re-skin bench
Change one variable
Pick an accent and watch the ring, the bar, the badge and both buttons follow at once. This is not a demo of five designs - it is one design reading one token.
Scenes
Drawn, not photographed
Every panel in this template is CSS: sky, ridge, ribs, heat and hoarfrost. The layout can be judged before a single asset exists - and when photography arrives, the panels simply retire.
Many formats
One identity, beyond the browser
The same tokens drive more than the site. The bundle ships a Word document, a PDF, an ebook, a spreadsheet and a slide deck in the Rem style - dark and light - plus thin stylesheets for print, EPUB, slides and code, and a style brief you can hand to any tool.
Where Rem comes from
A city out of a short story
Rem is not a mood board. It is a place: a frozen city of marble and steam from The First Mechan, a story in Luko Karavan's Antihistor cycle. The cold above, the Crucible burning underneath, the ring of twelve stamped on everything - they all come from there.
Every drawn panel, every brass mark and the whole ice-against-heat palette is that story translated into CSS. The story itself is in English on Substack, and the first third is free.
Dark / light
The same block, both ways
These are not two screenshots. They are two copies of the same markup, one in a dark token scope and one in a light one, reading the same stylesheet. Drag the seam.
Tokens
Cold steel
Nothing in this block names a colour. It asks for a background, a text colour and an accent, and the scope it sits in decides what those are.
Licences
Take it, use it, ship it
A pricing block is part of any landing template, so here it is, wired up. The template you are looking at costs nothing.
Free
0 forever
- Every page and stylesheet
- Dark and light themes
- Credit in the footer
Studio
19 / month 180 / year
- Everything in Free
- No footer credit required
- Document specimens
- Email support
Foundry
49 / month 470 / year
- Everything in Studio
- Unlimited client projects
- Token export for design tools
Questions
Before you download
Do I need a build step?
No. Open the folder, edit the HTML, refresh the browser. There is no bundler, no package manager and nothing to keep upgraded.
How do I change the colours?
Edit css/tokens.css and its mirror css/tokens-light.css. Nothing else in the template spells a colour, so the two files are the entire theme.
Can I use it commercially?
Yes - use it, change it and sell what you build with it. The only ask is that the credit stays in the footer.
Where are the images?
Every picture is one of the drawn scenes, rendered to WebP. Drop your own photographs into the same slots - the drawn panel underneath stays as the fallback.
Ready
Pull the lever
One folder, one token layer, one script. Free to use, change and ship.